import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined, EyeInvisibleOutlined,EyeTwoTone, LockTwoTone } from '@ant-design/icons';
import { Alert, Checkbox, Input ,Form} from 'antd';
import React, { useState } from 'react';
import { Link, connect, Dispatch, SelectLang } from 'umi';
import { StateType } from '@/models/login';
import { LoginParamsType } from '@/services/login';
import { ConnectState } from '@/models/connect';
import LoginForm from './components/Login';
import BOELogo from '../../../assets/BOE.png';

import styles from './style.less';
// import Form from 'antd/lib/form/Form';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginForm;
interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC<LoginProps> = (props) => {
  const { userLogin = {}, submitting } = props;
  const { status, message, type: loginType } = userLogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const [type, setType] = useState<string>('account');

  const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, type },
    });
  };
  return (
    <div className={styles.main}>
          <div className={styles.loginbg}>
            <img alt="logo" className={styles.logo} src={BOELogo} />
            <h2>智慧媒体管理系统</h2>
          </div>
          <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit} className={styles.loginForm}>
            <h3>平台登录</h3>
            {/* <Tab key="account" tab="账户密码登录"> */}
              {/* {status === 'error' && loginType === 'account' && !submitting && ( */}
              {status === 'error' && loginType === 'account' && !submitting && (
                <LoginMessage content={message} />
              )}
              <Input.Group compact>
                <UserName
                  name="userName"
                  placeholder="请输入用户名"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                  style={{width:200}}
                />
                <Form.Item 
                  name="topOrgName"
                  rules={[
                    {
                      required: true,
                      message: '请输入机构名!',
                    },
                  ]}
                >
                <Input
                  addonBefore="@"
                  size="large"
                  style={{width:100}}
                />
                </Form.Item>
              </Input.Group>
              {/* <Password
                name="password"
                placeholder="请输入密码"
                // iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              /> */}
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              >
                <Input.Password
                  placeholder="请输入密码"
                  iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                  size= 'large'
                  prefix= {<LockTwoTone className={styles.prefixIcon} />}
                >
                </Input.Password>
              </Form.Item>
            {/* </Tab> */}
            {/* <Tab key="mobile" tab="手机号登录">
              {status === 'error' && loginType === 'mobile' && !submitting && (
                <LoginMessage content="验证码错误" />
              )}
              <Mobile
                name="mobile"
                placeholder="手机号"
                rules={[
                  {
                    required: true,
                    message: '请输入手机号！',
                  },
                  {
                    pattern: /^1\d{10}$/,
                    message: '手机号格式错误！',
                  },
                ]}
              />
              <Captcha
                name="captcha"
                placeholder="验证码"
                countDown={120}
                getCaptchaButtonText=""
                getCaptchaSecondText="秒"
                rules={[
                  {
                    required: true,
                    message: '请输入验证码！',
                  },
                ]}
              />
            </Tab> */}
            {/* <div>
              <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
                自动登录
              </Checkbox>
              <a
                style={{
                  float: 'right',
                }}
              >
                忘记密码
              </a>
            </div> */}
            {/* <div>语言：<SelectLang /></div> */}
            <Submit loading={submitting}>登录</Submit>
            {/* <div className={styles.other}>
              其他登录方式
              <AlipayCircleOutlined className={styles.icon} />
              <TaobaoCircleOutlined className={styles.icon} />
              <WeiboCircleOutlined className={styles.icon} />
              <Link className={styles.register} to="/user/register">
                注册账户
              </Link>
            </div> */}
          </LoginForm>
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
